<template>
  <div id="aside">
    <el-row class="tac">
      <el-col :span="12" style="width: 100%;height: 100%">
        <el-menu
          default-active="15"
          class="el-menu-vertical-demo"
          style="height: 85vh"
        >
          <!--<el-submenu index="1">-->
          <!--<template slot="title">-->
          <!--<i class="el-icon-location"></i>-->
          <!--<span>导航一</span>-->
          <!--</template>-->
          <!--<el-menu-item-group>-->
          <!--<template slot="title">分组一</template>-->
          <!--<el-menu-item index="1-1">选项1</el-menu-item>-->
          <!--<el-menu-item index="1-2">选项2</el-menu-item>-->
          <!--</el-menu-item-group>-->
          <!--<el-menu-item-group title="分组2">-->
          <!--<el-menu-item index="1-3">选项3</el-menu-item>-->
          <!--</el-menu-item-group>-->
          <!--<el-submenu index="1-4">-->
          <!--<template slot="title">选项4</template>-->
          <!--<el-menu-item index="1-4-1">选项1</el-menu-item>-->
          <!--</el-submenu>-->
          <!--</el-submenu>-->
          <!--<el-menu-item index="2" id="menu-user">-->
          <!--<i class="el-icon-menu"></i>-->
          <!--<span slot="title">用户数据</span>-->
          <!--</el-menu-item>-->
          <!--<el-menu-item index="3" disabled>-->
          <!--<i class="el-icon-document"></i>-->
          <!--<span slot="title">导航三</span>-->
          <!--</el-menu-item>-->
          <el-menu-item index="ddsaas" key="fsdad" value="22223dss" @click.native="mainChang('22223dss')">
            <i class="el-icon-setting"></i>
            <span slot="title">导航三</span>
          </el-menu-item>


          <el-submenu v-for="(item,mindex) in menu" :index="mindex + ''" @click.native="mainChang(item.componentName)">
            <template slot="title">
              <span v-text="item.name"/>
              <i :class="item.icon"/>
            </template>
            <el-menu-item-group v-if="item.sub !== undefined && item.sub.length >0 ">
              <el-menu-item  v-for="(sb,sindex) in item.sub" :index="mindex + '-' + sindex" v-text="sb.name" @click.native="mainChang(sb.componentName)">
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>


        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import menu from '../config/menu-config'
  import Bus from "../Bus";

  export default {
    name: "Aside",
    data() {
      return {
        menu: menu
      }
    },
    methods: {
      mainChang:function(componentName) {
        if(componentName == 'null'){
          return;
        }
        console.log("item:" + componentName)
        Bus.$emit('mainChang',componentName);
      }
    }
  }
</script>

<style scoped>
  #aside {
    height: 100%;
  }
</style>
